<template>
  <div id="root">
    <Navbar />
    <div class="app-body my-8">
      <div class="container flex justify-between">
        <div class="app-main flex-1">
          <slot />
        </div>
        <div class="app-sidebar w-80">
          <SideNav />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup lang="ts">
import Navbar from './Default/Navbar.vue'
import SideNav from './Default/SideNav.vue'
import Footer from './Default/Footer.vue'

const sideNav = ref<boolean>(false)

const toggleSideNav = (): boolean => (sideNav.value = !sideNav.value)

provide('sideNav', sideNav)
provide('toggleSideNav', toggleSideNav)

useHead({
  titleTemplate: '%s - 广州前端交流',
  bodyAttrs: {
    class: 'light',
  },
})
</script>
